<template>
    <el-dialog :title="detailTitle" width="90%" @close="handleClose" style="font-size: larger;height: auto;">
        <div class="container">
            <!-- 右侧 -->
            <div>
                <el-button color="red" type="primary" @click="convertToCustomer">
                    <el-icon><svg-icon icon="转换" /></el-icon> <span></span>  转换
                </el-button>
            </div>
        </div>
        <div class="container">
            <!-- 左侧 -->
            <div class="row">
                <span class="label">名称</span>
                <span class="content bold">{{ form.clue.fullname }}</span>
            </div>
            <!-- 右侧 -->
            <div class="row2">
                <span class="label">所有者</span>
                <span class="content bold">{{ form.clue.owner }}</span>
            </div>
        </div>

        <div class="container">
            <!-- 左侧 -->
            <div class="row">
                <span class="label">公司</span>
                <span class="content bold">{{ form.clue.company }}</span>
            </div>
            <!-- 右侧 -->
            <div class="row2">
                <span class="label">职位</span>
                <span class="content bold">{{ form.clue.job }}</span>
            </div>
        </div>

        <div class="container">
            <!-- 左侧 -->
            <div class="row">
                <span class="label">邮箱</span>
                <span class="content bold">{{ form.clue.email }}</span>
            </div>
            <!-- 右侧 -->
            <div class="row2">
                <span class="label">公司座机</span>
                <span class="content bold">{{ form.clue.mphone }}</span>
            </div>
        </div>
        <div class="container">
            <!-- 左侧 -->
            <div class="row">
                <span class="label">公司网站</span>
                <span class="content bold">{{ form.clue.website }}</span>
            </div>
            <!-- 右侧 -->
            <div class="row2">
                <span class="label">手机</span>
                <span class="content bold">{{ form.clue.phone }}</span>
            </div>
        </div>

        <div class="container">
            <!-- 左侧 -->
            <div class="row">
                <span class="label">线索状态</span>
                <span class="content bold">{{ form.clue.state }}</span>
            </div>
            <!-- 右侧 -->
            <div class="row2">
                <span class="label">线索来源</span>
                <span class="content bold">{{ form.clue.source }}</span>
            </div>
        </div>


        <div class="row pading" style=" width: 70%;">
            <span class="label">创建者</span>
            <span class="content bold">{{ form.clue.createBy }}
                <span class="timeclass">
                    {{ form.clue.createTime }}
                </span>

            </span>
        </div>
        <!-- 右侧 -->
        <div class="row pading" style=" width: 70%">
            <span class="label">修改者</span>
            <span class="content bold">{{ form.clue.editBy }}
                <span class="timeclass">
                    {{ form.clue.editTime }}
                </span>

            </span>
        </div>

        <div class="row pading" style=" width: 100%">
            <span class="label">描述</span>
            <span class="content bold">{{ form.clue.description }}</span>
        </div>

        <div class="row pading" style=" width: 100%">
            <span class="label">联系纪要</span>
            <span class="content bold">{{ form.clue.contactSummary }} </span>
        </div>

        <div class="row pading">
            <span class="label">下一次联系时间</span>
            <span class="content bold">{{ form.clue.nextContactTime }} </span>
        </div>

        <div class="row pading">
            <span class="label">详细地址</span>
            <span class="content bold">{{ form.clue.address }} </span>
        </div>
        <CommentItem :crmClueRemarks="form.crmClueRemarks" @deleteComment="deleteComment" @editComment="editComment"
            @onSubmit="onSubmit" />

        <ActiveItem :clueId="id" ref="childComponent" />
    </el-dialog>
</template>

<script setup>
import { defineEmits, defineProps, ref, watch ,provide} from "vue"
import requestUtil, { getImageUrl } from "@/util/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import CommentItem from '@/components/CommentItem'
import ActiveItem from "@/components/ActivityItem";

//表单数据
const form = ref({
    clue: {
        "id": "3834e9aea93f41879ec0ed1b11e76559",
        "fullname": "路太远",
        "appellation": "先生",
        "owner": "admin",
        "company": "华为",
        "job": "项目近年来",
        "email": "2",
        "phone": 'null',
        "website": 'null',
        "mphone": 'null',
        "state": 'null',
        "source": "web下载",
        "createBy": 'null',
        "createTime": "2025-01-02 15:13:16",
        "editBy": "admin",
        "editTime": "2025-01-02 15:13:16",
        "description": "",
        "contactSummary": 'null',
        "nextContactTime": 'null',
        "address": 'null'
    },
    crmClueRemarks: [],
})

const detailTitle = ref("")

//父组件传递的数据
const props = defineProps(
    {
        id: {
            type: String,
            default: "",
            required: true
        },
        dialogVisible: {
            type: Boolean,
            default: false,
            required: true
        }
    }
)

// 转换
const convertToCustomer = async()=>{
    emits('update:modelValue', false)
    emits('changeConvert', props.id)
}
//删除评论
const deleteComment = async (comment) => {
    const res = await requestUtil.getRestFulApi("crmClueRemark/deleteCrmClueRemark/{id}", { id: comment.id })
    if (res.data.code == 1) {
        ElMessage.success("执行成功！")
        initDetailData(comment.clueId)
    } else {
        ElMessage.error(res.data.message);
    }
}
//修改评论
const editComment = async (comment) => {
    const res = await requestUtil.post("crmClueRemark/updateCrmClueRemark", comment)
    if (res.data.code == 1) {
        ElMessage.success("执行成功！")
        initDetailData(comment.clueId)
    } else {
        ElMessage.error(res.data.message);
    }
}
//添加评论
const onSubmit = async (desc) => {
    console.log('添加评论', form.value.clue.id)
    const res = await requestUtil.post("crmClueRemark/saveCrmClueRemark", { clueId: props.id, noteContent: desc })
    const data = res.data
    if (data.code == 1) {
        ElMessage.success("执行成功！")
        initDetailData(props.id)
    } else {
        ElMessage.error(data.message);
    }
}

// 定义对子组件的引用
const childComponent = ref(null);

//初始化数据
const initDetailData = async (clueId) => {
    const res = await requestUtil.getRestFulApi("crmClue/getClueDeatil/{id}", { id: clueId });
    const data = res.data.data;
    form.value = data;
    initActivityList(clueId)
    detailTitle.value = `${data.clue.fullname} - ${data.clue.company}`
}
//初始化活动列表
const initActivityList =(clueId) =>{
    childComponent.value.initActivityList(clueId);
}
//提供方法给孙组件
provide('initActivityList',initActivityList)


const emits = defineEmits(['update:modelValue','changeConvert'])
//关闭from表单
const handleClose = () => {
    emits('update:modelValue', false)
}

watch(
    () => props.dialogVisible,
    () => {
        let id = props.id;
        if (id != "" && props.dialogVisible) {
            initDetailData(id);
        }
    }
)

</script>

<style scoped>
.container {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: space-between;
    /* 左右两部分对齐 */
    align-items: center;
    /* 垂直居中 */
    padding: 10px 0;
    /* 上下留白 */
}

.row {
    display: flex;
    /* 每一行使用 Flexbox 布局 */
    align-items: center;
    /* 确保垂直居中 */
    gap: 10px;
    /* 在子元素之间添加间距 */
    border-bottom: 1px solid gray;
    /* 添加底部的线条 */
    padding: 5px 0;
    /* 底部线条与文字之间的间距 */
    width: 55%;

}

.row2 {
    display: flex;
    /* 每一行使用 Flexbox 布局 */
    align-items: center;
    /* 确保垂直居中 */
    gap: 10px;
    /* 在子元素之间添加间距 */
    border-bottom: 1px solid gray;
    /* 添加底部的线条 */
    padding: 5px 0;
    /* 底部线条与文字之间的间距 */
    width: 40%;
}

.label {
    color: gray;
    /* 左边文字颜色 */
    margin-right: 10px;
    /* 名称与右侧内容的间距 */
}

.content {
    color: black;
    /* 内容文字颜色 */
    font-weight: bold;
    /* 加粗 */
    text-align: center;
    /* 保证文字在 div 中间居中 */
    flex-grow: 1;
    /* 让这个元素占据剩余空间 */

}

.bold {
    font-weight: bold;
    /* 加粗字体 */
}

.pading {
    padding: 10px 0
}

.timeclass {
    color: grey;
    font-weight: normal;
}
</style>